<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body,div,ul,p,img{
		margin:0;
		padding: 0;
		border:0;
	}

   .chuangkou{
        width: 960px;
        height: 750px;
        border:1px solid gray;
        margin:auto;
        margin-top: 100px;
        border-radius: 10px;
        position: relative;
   }
  .regExt{
  width:360px;
  height:704px;
  position: absolute;
  border:1px solid gray;
  margin-left:62.3%;
  text-align: center;
 

}

    .header{
      position: relative;
      top:-120px;

    }

   .header .toubu{
       border: 0px solid;
       width: 700px;
       height: 35px;
       position: absolute;
       top:50px;
       background-image: url(images/toubu.png);
       margin-top: 20px;
      
   }
   .header .links{
    position:absolute;
	  width: 200px;
    right: 0;
    top: 72px;
    text-align: right;
    color: #999;
    

}
   .header .links a{
	font-size: 12px;
	margin: 0 5px;
	color: #039;
	text-decoration: none;

}
.regTabs{
      height: 58px;
    padding-left: 55px;
    
}
.regTabs ul{
    width: 412px;
    height: 35px;
    background-image: url(images/tab.jpg);
    background-repeat: no-repeat;
    list-style:none;
    margin-top: 20px;
}
.regTabs li{
    width: 137px;
    height: 35px;
    float: left;
    color: 
}
.regTabs a{
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #555;
    font-size: 14px;

  }
  .regTabs .a1{
  display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: white;
    font-size: 14px;


  }
.email{
  width: 180px;
  height: 20px;
  margin-left: 30px;


}

 .password{
   width: 280px;
   height: 20px;
   margin-left: 61px;

   

 }

.password-a{
   width: 280px;
   height: 20px;
   margin-left: 30px;

 }

 .phone{
  width: 280px;
   height: 20px;
   margin-left: 30px;
   

 }
 .yanzheng{
  width: 280px;
   height: 20px;
   margin-left: 15px;

 }

.mfyz{
   width: 200px;
   height: 30px;
   font-size: 16px;
   font-family: "黑体" ;
   border-radius:5px;
   margin-left:110px;
   background-color:#ccc;
   color:#000;
   border: #BBB 1px solid;
   margin-top: 2px;
  

}



.big{
  width: 600px;
  height: 700px;
  border: 0px solid;
}

.div-input{
  width: 500px;
  height: 30px;
  border: 0px solid;
  margin-left:50px;
  margin-top:25px;
}

p{
font-size: 12px;
margin-left: 158px;
color: #555;

}

span{

color:red;

  }

.btnReg {
width: 119px;
height: 37px;
font-size: 16px;
font-family: "黑体";
border-radius:3px;
background:#51ad3b;
color:#fff;
border: #51ad3b 1px solid;
margin-left: 115px;
margin-top:20px;


}
.duanxin{
  width: 200px;
  height: 20px;
  margin-left: 48px;


}

a{
  text-decoration:none;
}
.footer{
    text-align: center;
    clear: both;
    height: 40px;
    line-height: 40px;
    color: #999;
  }

  .itlSelext{
     width:430px;
     height: 280px;
     top: 469px;
     left: 299.5px;
     display: block;
     background-color: #fff;
     border: 1px solid #ccc;
     float: right;
     position: absolute;
     z-index: 999;
     top:383px;
     left: 160px;

  }
.itlSelext a{
    display: block;
    line-height: 24px;
    height: 24px;
    padding-left: 26px;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: #036;
    margin-top: 10px;
    font-size: 15px;

}
.itlSelext a em{
  width: 16px;
  height: 11px;
  display: line-block;
  background-image: url(images/flags.gif);
  margin-right: 6px;
  margin-left: 4px;
  float: left;
}
.flag-CN em{
  background-position: 0 -825px;
  
}
.flag-AL em{
  background-position: 0 -1034px;
  
}
.flag-DZ em{
  background-position: 0 -528px;
  
}
.flag-AF em{
  background-position: 0 -2311px;
 
}
.flag-AR em{
  background-position: 0 -2377px;
 
}
.flag-AE em{
  background-position: 0 -2223px;

}

.itl{
   position: absolute;
  width: 33px;
  height: 23px;
  top: 355px;
  zoom:1;
  cursor: pointer;
  left: 159px;
  line-height: 27px;
  border:1px solid none;
}
.itl-flag{
  position: relative;
  width: 100%;
  height: 100%;
  top: 10%;
  float: left;
  cursor: default;
  background: url(images/triangle.gif) no-repeat 25px center;
	
}
.itl-flag em{
  top: 50%;
  position: absolute;
  left: 5px;
  margin-top:-5px;
  display: inline-block;
  height: 11px;
  width: 16px;
  overflow: hidden;
  background-image: url(images/flags.gif) ;
  background-repeat: no-repeat;
  background-position: 0 -825px;

}



</style>


</head>
  <body>
     <div class="" style="width:960px;margin:0 auto;padding-top:0px;">

     <header class="header">
      <div class="toubu"></div>
      <div class="links"><a href="#">了解更多</a>|<a href="#">反馈意见</a></div>
     </header>
    
    	<div class="chuangkou">
          <p  style="background-color:#336699;font-size:15px;color:white;line-height:45px;border-top-right-radius:10px;
          border-top-left-radius:10px;padding-left:10px;margin-left:0px;">欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品</p>
          <aside class="mainBody-side">
         <div class="regExt" id="adds">
         <img src="images/phone.gif" alt="邮箱大师" style=" padding: 100px;margin-right:130px;
    "> 
         </div>
         </aside>
    	<div class="big">
      <div class="neirong">
      <div class="regTabs">
        <ul id="tabsUL" class="tabsl-on">
               <li><a tabindex="-1"  class="a1" style="text-decoration:none;">注册字母邮箱</a></li>
               <li><a tabindex="-1"  class="a2"  style="text-decoration:none;">注册手机号码邮箱</a></li>
               <li><a tabindex="-1"  class="a3" style="text-decoration:none;">注册VIP邮箱</a></li>
        </ul>
      </div>
        <div class="div-input">
        <span>*</span>邮箱地址
        <input type="text" class="email"  > @ 
        <select style="height:25px;">
                      <option>163.com</option>
                      <option>qq.com</option>
                      <option>126.com</option>
                      </select>
                          </div>
      <p>6~18个字符，可使用字母、数字、下划线，须以字母开头</p>
        
      
      <div class="div-input">
       <span>*</span>密码
      <input type="password" class="password"></div>
      <p>6~16个字符区分大小写</p>
      
      <div class="div-input">
        <span>*</span>确认密码
        <input type="password" class="password-a"></div>
        <p>请再次填写密码</p>
      
      <div class="div-input">
        <span>*</span>手机号码

        <input type="text" class="phone" style="padding-left:36px"> 
        
             
        <div class="itlSelext">
              <a href="#" class="flag-CN"><em></em>中国 +86</a>
              <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqieria) +355</a>
              <a href="#" class="flag-DZ"><em>&nbsp;</em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
              <a href="#" class="flag-AF"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>
              <a href="#" class="flag-AR"  data-code="+54-"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
              <a href="#" class="flag-ae"  data-code="+971-"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
        </div>
             <div  class="itl">
                 <div class="itl-flag">
                 <em>&nbsp;</em>
             </div>
        </div>
        </div>
              <p>忘记密码时，可以通过该手机号码快速找回密码</p>
      
        <div class="div-input">
            <span>*</span>验证码
            <input type="text" class="duanxin">
            <img  id="vcodeImg" class="vcode" src="call/call0.jpg" alt="验证码" style="cursor:pointer;width:120px;height:50px;float:right;margin-right:50px;">
            <a href="" id="vcodeA" class="switchvCode" tabindex="-1;" style="float:right;font-size:12px;margin-top:15px;margin-left:250px;">看不清楚？换张图片</a>
        </div>
            <p>请填写图片中的字符，不区分大小写</p>
            <div class="div-input">
            <input type="submit" value="免费获取验证码" class="mfyz">
        </div>


        <div class="div-input">
            <span>*</span>短信验证码

            <input type="text" class="yanzheng"><br>

        </div>

            <p>请查收手机短信，并填写短信中的验证码</p>

        <div class="div-input">
            <input type="checkbox" style="margin-top:20px;margin-left:110px;margin-top:20px;">同意<a href="">"服务条款"</a>和<a href="">"隐私权相关政策"</a>
        </div>

        <div class="div-input">
            <input type="button" value="立即注册"  class="btnReg">
        </div>
       
  </div>
  </div>
  </div>
  <footer class="footer" style="height:80px">
       <a href="#">关于网易</a>&nbsp;&nbsp;<a href="#">关于网易免费邮箱</a>
       &nbsp;&nbsp;<a href="#">邮箱官方博客</a>&nbsp;&nbsp;<a href="#">客户服务</a>
        &nbsp;&nbsp;<a href="#">隐私政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;网易公司版权所有&nbsp;©&nbsp;1997-<script src=""></script>2018<br>
        数据来源，艾媒咨询《2015-2018中国个人邮箱行业研究报告》
  </footer>
  <script type="text/javascript">
   
   // var li=document.querySelectorAll("li");
  
   //   for(i=0;i<li.length;i++){
   //    li[i].onclick=function(){
   //      this.style.color="white";
   //      // this.style.background="blue";
   //     // ul.style.background="url(images/tab.jpg) no-repeat 0 -"+a.index*56+"px";
   //    }
   //   }
  

  function itlSelext() {
    //找到下拉框里的<a>标签
    var links=document.querySelectorAll(".itlSelext a");

    //给找到的A标签 绑定单击事件
    for(var i=0;i<iinks.lengh;i++){
      links[i].addEventListener("click",function(e){
        var a=e.target;
        var txt=a.innerText;
        var cls=t.getAttribute("class");
        var st=document.getElementsByClassName("itl-flag")[0];
        st.className="itl-flag"+cls;
      });
    }
}
      (function(){
        var tabs=document.querySelectorAll(".regTabs ul li a");
        var ul=document.querySelector("regTabs ul");
        console.log(ul);
        for(var i=0;i<tabs.lengh;i++){
          tabs[i].index=i;
          tabs[i].addEventListener("click",function(e)){
            var a=e.target;
            console.log(a.index);
            ul.style.background="url(images/tab.jpg) no-repeat 0 -"+a.index*56+"px";
            for(var j=0;j<tabs.lengh;j++){
              tabs[j].style.color *"#000";
            }
            a.style.color *"#fff";
          }
        }
     });




  

</script>
</body>
</html>